<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="/WEB-INF/jsp/common/header.jsp" %>

<div class="row justify-content-center">
    <div class="col-md-6">
        <div class="card shadow mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">用户信息</h5>
            </div>
            <div class="card-body">
                <div class="text-center mb-4">
                    <c:if test="${sessionScope.user != null && sessionScope.user.id == user.id}">
                        <div class="avatar-wrapper position-relative mb-3">
                            <c:choose>
                                <c:when test="${user.avatar != null && user.avatar != ''}">
                                    <img src="${pageContext.request.contextPath}${user.avatar}" class="avatar-image" alt="${user.nickname != null && user.nickname != '' ? user.nickname : user.username}">
                                </c:when>
                                <c:otherwise>
                                    <div class="avatar-circle">
                                        <span class="initials">${user.nickname != null && user.nickname != '' ? user.nickname.substring(0, 1) : user.username.substring(0, 1)}</span>
                                    </div>
                                </c:otherwise>
                            </c:choose>
                            <div class="avatar-overlay">
                                <i class="fas fa-camera"></i>
                                <span>更换头像</span>
                            </div>
                        </div>
                    </c:if>
                    <c:if test="${sessionScope.user == null || sessionScope.user.id != user.id}">
                        <c:choose>
                            <c:when test="${user.avatar != null && user.avatar != ''}">
                                <div class="mb-3">
                                    <img src="${pageContext.request.contextPath}${user.avatar}" class="avatar-image" alt="${user.nickname != null && user.nickname != '' ? user.nickname : user.username}">
                                </div>
                            </c:when>
                            <c:otherwise>
                                <div class="avatar-circle mb-3">
                                    <span class="initials">${user.nickname != null && user.nickname != '' ? user.nickname.substring(0, 1) : user.username.substring(0, 1)}</span>
                                </div>
                            </c:otherwise>
                        </c:choose>
                    </c:if>
                    <h4>${user.nickname != null && user.nickname != '' ? user.nickname : user.username}</h4>
                </div>
                
                <ul class="list-group">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <span>用户名</span>
                        <span class="text-secondary">${user.username}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <span>姓名</span>
                        <span class="text-secondary">${user.fullName != null ? user.fullName : '未设置'}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <span>年龄</span>
                        <span class="text-secondary">${user.age > 0 ? user.age : '未设置'}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <span>性别</span>
                        <span class="text-secondary">${user.gender != null ? user.gender : '未设置'}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <span>邮箱</span>
                        <span class="text-secondary">${user.email != null ? user.email : '未设置'}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <span>手机</span>
                        <span class="text-secondary">${user.phone != null ? user.phone : '未设置'}</span>
                    </li>
                </ul>
                
                <c:if test="${user.hobby != null && user.hobby != ''}">
                    <div class="mt-3">
                        <h6>爱好</h6>
                        <div class="d-flex flex-wrap gap-1">
                            <c:forEach var="hobby" items="${user.hobby.split(',')}">
                                <span class="badge bg-info text-dark">${hobby}</span>
                            </c:forEach>
                        </div>
                    </div>
                </c:if>
            </div>
            
            <c:if test="${sessionScope.user != null && sessionScope.user.id == user.id}">
                <div class="card-footer">
                    <a href="${pageContext.request.contextPath}/user/edit?id=${user.id}" class="btn btn-primary w-100">
                        <i class="fas fa-edit me-2"></i>编辑个人资料
                    </a>
                </div>
            </c:if>
        </div>
    </div>
</div>

<!-- 头像上传表单（隐藏） -->
<c:if test="${sessionScope.user != null && sessionScope.user.id == user.id}">
    <form id="avatarForm" enctype="multipart/form-data" style="display: none;">
        <input type="file" id="avatarInput" name="avatarFile" accept="image/*">
    </form>
</c:if>

<!-- 自定义样式 -->
<style>
.avatar-circle {
    width: 100px;
    height: 100px;
    background-color: #007bff;
    text-align: center;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

.initials {
    position: relative;
    color: #ffffff;
    font-size: 48px;
    font-weight: bold;
}

.avatar-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto;
    cursor: pointer;
    overflow: hidden;
}

.avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    opacity: 0;
    transition: opacity 0.3s;
}

.avatar-wrapper:hover .avatar-overlay {
    opacity: 1;
}

.avatar-overlay i {
    font-size: 24px;
    margin-bottom: 5px;
}

.avatar-overlay span {
    font-size: 12px;
}
</style>

<!-- 头像上传脚本 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 头像上传功能
    const avatarWrapper = document.querySelector('.avatar-wrapper');
    const avatarInput = document.getElementById('avatarInput');
    
    if (avatarWrapper && avatarInput) {
        avatarWrapper.addEventListener('click', function() {
            avatarInput.click();
        });
        
        avatarInput.addEventListener('change', function() {
            if (this.files && this.files[0]) {
                // 本地预览
                const reader = new FileReader();
                reader.onload = function(e) {
                    avatarWrapper.innerHTML = `
                        <img id="userAvatarImg" src="${e.target.result}" class="avatar-image" alt="用户头像预览">
                        <div class="avatar-overlay">
                            <i class="fas fa-camera"></i>
                            <span>更换头像</span>
                        </div>
                    `;
                }
                reader.readAsDataURL(this.files[0]);

                // 上传逻辑
                const formData = new FormData(document.getElementById('avatarForm'));
                formData.append('id', ${user.id});
                
                fetch('${pageContext.request.contextPath}/user/uploadAvatar', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        setTimeout(function() {
                            const img = document.getElementById('userAvatarImg');
                            if (img) {
                                img.src = '${pageContext.request.contextPath}' + data.avatar + '?t=' + new Date().getTime();
                            }
                        }, 100);
                    } else {
                        alert('头像上传失败：' + data.message);
                    }
                })
                .catch(error => {
                    alert('头像上传失败，请稍后再试');
                });
            }
        });
    }
});
</script>

<%@ include file="/WEB-INF/jsp/common/footer.jsp" %> 